<template>
  <div class="count">
    <h2>{{ title }}</h2>
    <h2>{{ desc }}</h2>
    <h2>当前求和为：{{ sum }}</h2>
    <div>bigSum:{{ bigSum }}</div>
    <div>changeDesc:{{ changeDesc }}</div>
    <select v-model.number="n">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="add">加</button>
    <button @click="minus">减</button>
    <br/>
    <button @click="changeTitle">修改title</button>
    <div>生成ID：{{ id }}</div>
    <button @click="genId">生成id</button>
  </div>
</template>

<script setup lang="ts" name="Count">
  import { ref } from "vue";
  import { useCountStore } from "@/store/Count";
  import { storeToRefs } from "pinia";
  import { nanoid } from "nanoid";
  // 数据
  let countStore = useCountStore()
  let {sum, title, desc, bigSum, changeDesc} = storeToRefs(countStore)
  let n = ref(1) // 用户选择的数字

  // 方法
  function add(){
    sum.value += n.value
  }
  function minus(){
    sum.value -= n.value
  }
  function changeTitle() {
    // 第一种修改方式，直接修改
    /* sumStore.title = '这是修改后的标题'
    sumStore.desc = '这是修改后的内容描述' */

    // 第二种修改方式，使用patch
    /* sumStore.$patch({
      sum: 100,
      title: '这是修改后的标题',
      desc : '1111111111111111'
    }) */

    // 第三张修改方式，使用Action，可以加一些业务逻辑
    countStore.changeSumAndTitle(n.value)
  }
  // 生成id测试
  let id = ref('')
  function genId() {
    id.value = nanoid()
  }
</script>

<style scoped>
  .count {
    background-color: skyblue;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 0 10px;
  }
  select,button {
    margin: 0 5px;
    height: 25px;
  }
</style>